<template>
  <div style="width: 100%">
    <el-button type="info" @click="toBackManage">返回后台</el-button>
    <div style="width: 100%; margin: 0px auto">
      <div class="head_title">
        <h3>{{ title }}</h3>
        <!-- <h3>{{ peopleData.title }}</h3> -->
        <p>{{ des }}</p>
        <p>{{ des2 }}</p>
        <p>{{ des3 }}</p>
      </div>
      <div class="content_people">
        <div class="content_first">
          <div style="width: auto; margin: 0 auto">
            <div class="people" :key="index" v-for="(item, index) in peopleData.schoolParty">
              <div class="imgBox">
                <img src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png" />
              </div>
              <div class="spanBox">
                <span>{{ item.name }}</span>
              </div>
            </div>
          </div>
        </div>
        <div class="content_second">
          <div class="content_box" v-for="(item, i) in peopleData.erjiCommite" :key="item.name">
            <div class="content_des">
              <div class="content_des_name">
                <div class="content_xian">
                  <span v-if="i !== 0" class="xian_heng"></span>
                  <span class="xian_shu"></span>
                </div>
                <div class="content_name">
                  {{ item.commiteName }}
                </div>
              </div>
              <div class="content_box_con">
                <div class="content_person" v-for="item2 in item.erjiCommitePeople" :key="item2.code">
                  <div class="imgBox">
                    <img src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png" />
                  </div>
                  <div class="spanBox">
                    <span>{{ item2.name }}</span>
                  </div>
                </div>
              </div>
            </div>

            <div class="content_des_third">
              <div class="content_third_con" v-for="(item3, i) in item.branchList" :key="i">
                <div class="content_des_name">
                  <div class="content_xian">
                    <span v-if="i % 2 != 0" class="xian_heng"></span>
                    <span class="xian_shu"></span>
                  </div>
                  <div class="content_name">
                    {{ item3.name }}
                  </div>
                </div>
                <div class="content_box_con">
                  <div class="content_person" v-for="(item4, i) in item3.branchPeople" :key="i">
                    <div class="imgBox">
                      <img src="https://cube.elemecdn.com/9/c2/f0ee8a3c7c9638a54940382568c9dpng.png" />
                    </div>
                    <div class="spanBox">
                      <span>{{ item4.name }}</span>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import requestUtil, { getServerUrl } from "@/utils/request";
import router from "@/router";
export default {
  name: "",
  data() {
    return {
      title: "中共宁波财经学院学院党委",
      des: "二级党组织党建与思政工作考核内容由基础工作、述职评议、特色与创新三部分组成。",
      des3: "基础工作。主要考核二级党组织党建与思政日常工作的推进落实情况，包括贯彻落实上级党组织决策部署及制度建设、基层党建工作、意识形态工作、思想政治工作、党风廉政建设、统战及群团工作六个方面。",
      des2: "重点考核二级党组织落实全面从严治党主体责任、领导班子建设、完成学校党委重要工作情况，突出发挥基层党建引领作用，服务学校、学院发展大局的做法与成效。",
      peopleData: {
        schoolParty: [{ name: "学校党委书记" }, { name: "学校党委书记" }],
        erjiCommite: [
          {
            name: "党委",
            erjiCommitePeople: [{ name: "党委书记" }],
            branchList: [{ name: "党支部", branchPeople: [{ name: "支部书记" }, { name: "支部书记2" }] }],
          },
        ],
      },
    };
  },
  created() {
    this.getDataList();
    document.addEventListener("visibilitychange", this.onVisibilityChange);
  },
  methods: {
    async getDataList() {
      let res = await requestUtil.get("qiantai/getDisplayList");
      let branchLister = res.data.list.branchList;
      let commiteList = res.data.list.commiteList;

      for (let i = 0; i < commiteList.length; i++) {
        let erjiCommitePeople = [];
        erjiCommitePeople.push({ name: commiteList[i].secretaryName });
        commiteList[i].erjiCommitePeople = erjiCommitePeople;

        let branchListarr = [];
        for (let j = 0; j < branchLister.length; j++) {
          if (commiteList[i].commiteName == branchLister[j].commiteName) {
            branchListarr.push({ name: branchLister[j].branchName, branchPeople: [{ name: branchLister[j].secretaryName }] });
            commiteList[i].branchList = branchListarr;
          }
        }
      }

      this.peopleData = {
        schoolParty: [{ name: "周波" }, { name: "王云儿" }],
        erjiCommite: commiteList,
      };

      console.log(this.peopleData);
    },
    toBackManage() {
      // 返回后台
      router.push("/cms/party");
    },
    onVisibilityChange() {
      console.log(document.hidden);
      this.getDataList();
    },
  },
};
</script>

<style lang="scss" scoped>
.head_title {
  height: 130px;
  width: 100%;
  margin: 20px auto;

  h3 {
    color: rgb(201, 36, 40);
    font-size: 20px;
    text-align: center;
  }

  p {
    margin-top: 20px;
    text-align: center;
    font-size: 13px;
    font-weight: 600;
  }
}

.content_people {
  margin-top: 10px;
  width: 100%;

  .content_first {
    width: 100%;
    height: 145px;
    margin: 0 auto;
    // padding-left: 40%;
    display: flex;

    .people:nth-child(1) {
      margin-left: 0;
    }

    .people {
      justify-content: center;
      width: 100px;
      height: 165px;
      float: left;
      margin-left: 25px;

      .imgBox {
        width: 100%;
        height: 120px;
        background: #fff;

        img {
          width: 100%;
          height: 100%;
        }
      }

      .spanBox {
        width: 100%;
        height: 16px;
        padding: 5px 3px 0 3px;
        text-align: center;

        span {
          font-size: 14px;
        }
      }
    }
  }

  .content_second {
    display: flex;
    margin-top: 25px;
    width: 100%;
    justify-content: center;

    .content_box {
      display: flex;
      flex-direction: column;
      // justify-content: center;
      width: 565px;
      // background: gray;
      margin-left: 20px;
      height: auto;

      .content_des {
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: center;

        .content_des_name {
          height: 100px;
          margin-bottom: 20px;
          widows: 100%;
          display: flex;
          flex-direction: column;
          align-items: center;

          .content_xian {
            width: 210px;
            height: 50px;
            // position: relative;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;

            span {
              display: inline-block;
            }

            .xian_heng {
              // bug
              // margin-left: -584px;
              // width: 590px;
              margin-left: -561px;
              width: 565px;
            }

            .xian_shu {
              // position: absolute;
              // left: 60%;
            }
          }

          .content_name {
            margin: 0 auto;
            text-align: center;
            line-height: 50px;
            width: 210px;
            height: 50px;
            font-size: 13px;
            // font-weight: 600;
            border-radius: 10px;
            background: rgb(201, 36, 40);
            color: #fff;
          }
        }

        .content_person:nth-child(1) {
          margin-left: 0;
        }

        .content_box_con {
          width: 100%;
          height: 170px;
          display: flex;
          justify-content: center;

          .content_person {
            width: 100px;
            height: 170px;
            float: left;
            margin-left: 11px;

            .imgBox {
              width: 100px;
              height: 120px;
              background: #fff;

              img {
                width: 100%;
                height: 100%;
              }
            }

            .spanBox {
              width: 100%;
              height: 16px;
              padding: 5px 3px 0 3px;
              text-align: center;

              span {
                font-size: 12px;
              }
            }
          }
        }
      }

      .content_des_third {
        width: 100%;
        display: flex;
        flex-wrap: wrap;

        .content_third_con {
          width: 50%;

          .content_des_name {
            height: 100px;
            margin-bottom: 20px;
            widows: 100%;
            display: flex;
            flex-direction: column;
            align-items: center;

            .content_xian {
              width: 110px;
              height: 50px;
              // position: relative;
              display: flex;
              flex-direction: column;
              justify-content: center;
              align-items: center;

              span {
                display: inline-block;
              }

              .xian_heng {
                // bug
                // margin-left: -280px;
                // width: 285px;
                width: 276px;
                margin-left: -273px;
              }

              .xian_shu {
                // position: absolute;
                // left: 60%;
              }
            }

            .content_name {
              margin: 0 auto;
              text-align: center;
              line-height: 50px;
              width: 210px;
              height: 50px;
              font-size: 13px;
              // font-weight: 600;
              border-radius: 10px;
              background: rgb(201, 36, 40);
              color: #fff;
            }
          }

          .content_person:nth-child(1) {
            margin-left: 0;
          }

          .content_box_con {
            width: 100%;
            height: 170px;
            display: flex;
            justify-content: center;

            .content_person {
              width: 100px;
              height: 170px;
              float: left;
              margin-left: 11px;

              .imgBox {
                width: 100px;
                height: 120px;
                background: #fff;

                img {
                  width: 100%;
                  height: 100%;
                }
              }

              .spanBox {
                width: 100%;
                height: 16px;
                padding: 5px 3px 0 3px;
                text-align: center;

                span {
                  font-size: 12px;
                }
              }
            }
          }
        }
      }
    }
  }
}

.xian_shu {
  width: 5px;
  height: 50px;
  background: rgb(201, 36, 40);
}

.xian_heng {
  width: 289px;
  height: 5px;
  background: rgb(201, 36, 40);
}

.xian_heng_end {
  width: 105px;
  height: 5px;
  margin-left: 3px;
  margin-top: 4px;
  background: rgb(201, 36, 40);
}
</style>
